<template>
  <div>
    <!--筛选条件-->
    <div class="blockMould work_search">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我收到的工单" name="received"></el-tab-pane>
        <el-tab-pane label="我创建的工单" name="establish"></el-tab-pane>
      </el-tabs>
      <screeningCriteria class="search_lists" :projectList='projectList'
                         :founderList='founderList'
                         :handlerList='handlerList'
                         :workOrderStatusList="workOrderStatusList"
                         :workOrderTypeList="workOrderTypeList"
                         @project="project"
                         @founder="founder"
                         @handler="handler"
                         @workOrderStatus="workOrderStatus"
                         @workOrderType="workOrderType"
                         @creationTime="creationTime"
                         ref="resetFun"
      ></screeningCriteria>
    </div>
    <div class="blockMould list work_list">
      <!--行为按钮-->
      <div class="behavior">
        <div class="left">
          <el-button type="warning" plain size="small" @click="dialogTableVisible = true">新增</el-button>
        </div>
        <div class="right">
          <el-button type="primary" size="small" @click="requestData(activeName)">查询</el-button>
          <el-button plain size="small" @click="reset">重置</el-button>
        </div>
      </div>
      <!--表格-->
      <el-table
        :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
        :data="tableData">
        <el-table-column label="工单编号" prop="workOrderId" min-width="70" align="center"></el-table-column>
        <el-table-column label="项目" prop="productName" min-width="80"></el-table-column>
        <el-table-column
          label="工单标题" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div @click="workOrderDetails(scope.row)" style="color: rgba(42, 130, 226, 1);cursor:pointer">
              {{scope.row.workOrderTitle}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="工单内容" prop="workOrderDesc" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="工单类型" prop="workOrderType" min-width="60"></el-table-column>
        <el-table-column
          label="工单状态"
          min-width="58">
          <template slot-scope="scope">
            <div v-if="scope.row.workOrderStatus=='0'">
              <span style="background: rgba(145, 147, 152, 0.2);color: #919398;">待处理</span>
            </div>
            <div v-if="scope.row.workOrderStatus=='1'">
              <span style="background: rgba(26, 179, 148, 0.2);color:rgba(26, 179, 148, 1)">已处理</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createRepName" min-width="50"></el-table-column>
        <el-table-column label="创建时间" prop="sysInsert" min-width="108"></el-table-column>
        <el-table-column label="当前处理人" prop="dealRepName" min-width="65"></el-table-column>
      </el-table>
      <!--分页-->
      <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
    </div>
    <!--创建工单-->
    <el-dialog 
      title="新增" 
      width="526px" 
      :visible.sync="dialogTableVisible"
      :before-close="closeCreateDialog">
      <el-tabs v-model="activeWorkOrderName">
        <el-tab-pane label="拜访信息" name="visitInfo" class="visit_info">
          <!--项目-->
          <div class="search_list project">
            <span class="mandatory_logo">*</span>
            <span class="search_text">项目名称：</span>
            <el-select size="small" v-model="workOrderProject" value-key="id" placeholder="请选择">
              <el-option v-for="item in projectList" :key="item.id" :label="item.name"
                        :value="item"></el-option>
            </el-select>
          </div>
          <!--医生信息-->
          <div class="search_list doctor">
            <span class="mandatory_logo">*</span>
            <span class="search_text">医生信息：</span>
            <el-select
              size="small"
              v-model="doctorInformation"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
              value-key="id">
              <el-option
                v-for="item in doctorInformationList"
                :key="item.id"
                :label="item.name"
                :value="item">
              </el-option>
            </el-select>
          </div>
          <!--拜访记录-->
          <div class="search_list visit">
            <span class="search_text">拜访记录：</span>
            <el-select size="small" v-model="visitRecord" placeholder="请选择">
              <el-option v-for="item in visitRecordList" :key="item.id" :label="item.name"
                        :value="item.name"></el-option>
            </el-select>
          </div>
          <!--截止时间-->
          <div class="search_list time">
            <span class="search_text">截止时间：</span>
            <el-date-picker
              size="small"
              v-model="deadline"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
      </el-tab-pane>
        <el-tab-pane label="工单信息" name="workInfo" class="work_info">
          <!--工单类型-->
          <div class="search_list work_type">
            <span class="mandatory_logo">*</span>
            <span class="search_text">工单类型：</span>
            <el-select size="small" v-model="establishWorkOrderType" value-key="resourceValue" placeholder="请选择">
              <el-option v-for="item in workOrderTypeList" :key="item.resourceValue" :label="item.resourceItem"
                        :value="item"></el-option>
            </el-select>
          </div>
          <!--工单标题-->
          <div class="search_list work_title">
            <span class="mandatory_logo">*</span>
            <span class="search_text">工单标题：</span>
            <el-input size="small" type="text" placeholder="请输入内容" v-model="WorkOrderTitle"></el-input>
          </div>
          <!--工单描述-->
          <div class="search_list work_desc">
            <span class="mandatory_logo">*</span>
            <span class="search_text">工单描述：</span>
            <el-input size="small" type="textarea" placeholder="请输入内容" v-model="WorkOrderDescribe" maxlength="1000"
                      show-word-limit></el-input>
          </div>
          <!--图片（选填)-->
          <div class="search_list work_image">
            <span class="search_text upload">图片：</span>
            <div class="inline_block">
              <div class="upload_promit">
                <img src="../../assets/common/promit.svg" alt="">
                <p>最多上传三张图片，每张图片大小不超过512k，支持png，jpg，jpeg三种格式</p>
              </div>
              <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="submitUpload()">
                <el-form-item :class="{hide:hideUpload}">
                  <el-upload ref="upload" action="#" multiple :limit="3" :file-list="dataForm.imgFileList"
                            list-type="picture-card"
                            :on-change="OnChange"
                            accept="image/jpeg,image/png,image/jpg," :auto-upload="false">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible" append-to-body>
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!--处理人-->
          <div class="search_list work_user">
            <span class="mandatory_logo">*</span>
            <span class="search_text">处理人：</span>
            <el-select size="small" v-model="WorkOrderHandler" value-key="id" placeholder="请选择">
              <el-option v-for="item in handlerList" :key="item.id" :label="item.name"
                        :value="item"></el-option>
            </el-select>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="operationButton">
        <el-button size="small" @click="cancelCreateDialog">取消</el-button>
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import pagination from '../public/pagination';
  import screeningCriteria from '../components/workOrderScreeningCriteria';
  import {baseAjax} from "@/api/api";
  import {httpForm} from "@/api/http";
  import {statusCode} from '@/utils/index.js';
  import Cookies from "js-cookie";

  export default {
    components: {pagination, screeningCriteria},
    data() {
      return {
        activeName: 'received',
        //项目
        returnProject: '',
        projectList: [],
        //创建人
        returnFounder: '',
        founderList: [],
        //当前处理人
        returnHandler: '',
        handlerList: [],
        //工单状态
        returnWorkOrderStatus: '',
        workOrderStatusList: [
          {
            id: 0,
            name: '待处理',
          }, {
            id: 1,
            name: '已处理',
          }
        ],
        //工单类型
        returnWorkOrderType: '',
        workOrderTypeList: [],
        //创建时间
        returnCreationTime: '',
        //表格
        tableData: [],
        //分页
        page: {
          currentPage: 1,    //当前页
          pageSize: 10,    //每页条数
          totalPage: 0,   //总页数
          total:null   //总条数
        },
        //创建工单
        dialogTableVisible: false,
        workOrderProject: '',
        //医生信息
        loading: false,
        doctorInformation: '',
        doctorInformationList: [],
        //拜访记录
        visitRecord: '',
        visitRecordList: [],
        visitRecordLists: [],
        //截止时间
        deadline: '',
        //工单类型
        establishWorkOrderType: '',
        //工单标题
        WorkOrderTitle: '',
        //工单描述
        WorkOrderDescribe: '',
        //图片
        dialogImageUrl: '',
        dialogVisible: false,
        //处理人
        WorkOrderHandler: '',
        //代表信息
        user_info: '',

        //是否显示上传图片的加号
        hideUpload: false,
        dataForm: {
          imgFileList: []
        },
        activeWorkOrderName:'visitInfo'

      }
    },
    watch: {
      dialogTableVisible() {
        if (!this.dialogTableVisible) {
          this.workOrderProject = ''
          this.doctorInformation = ''
          this.visitRecord = ''
          this.deadline = ''
          this.establishWorkOrderType = ''
          this.WorkOrderTitle = ''
          this.WorkOrderDescribe = ''
          this.dialogImageUrl = ''
          this.dialogVisible = false
          this.WorkOrderHandler = ''
        }
      },
      doctorInformation() {
        if (this.doctorInformation) {
          this.visitRecordList = []
          let byDoctor = {
            url: '/call_record/byDoctor?doctorId=' + this.doctorInformation.id,
            method: 'GET',
          }
          baseAjax(byDoctor, '', (res) => {
            if (res.code == statusCode.success) {
              this.visitRecordLists = res.data
              res.data.forEach((val) => {
                if (val.item == null) {
                  this.visitRecordList.push({
                    name: val.callRecordId + '、' + val.operationTime
                  })
                } else {
                  this.visitRecordList.push({
                    name: val.callRecordId + '、' + val.operationTime + '、' + val.item
                  })
                }
              })
            }
          })
        } else {
          this.visitRecordList = []
        }
      }
    },
    mounted() {
      this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
      this.requestData(this.activeName)
      this.allProjects()
      this.work_order_type()
      this.allFounderHandler()
    },
    methods: {
      //数据结构
      data() {
        let obj = {
          //创建代表ID
          createRepId: this.returnFounder.id,
          //处理代表ID
          dealRepId: this.returnHandler.id,
          //产品ID
          productId: this.returnProject.id,
          startTime: this.returnCreationTime[0],
          endTime: this.returnCreationTime[1],
          repIdWorkOrderAboutMe: null,
          repIdWorkOrderCreateByMe: null,
          workOrderStatus: this.returnWorkOrderStatus.id,
          workOrderTypeId: Number(this.returnWorkOrderType.resourceValue),
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize,
          totalPage: this.page.totalPage,
        }
        return obj
      },
      //tabs
      handleClick(tab) {
        this.$refs.resetFun.resetFun();
        this.requestData(tab.name)
      },
      //工单表格
      requestData(tab) {
        let obj = this.data()
        //我收到的工单
        if (tab == 'received') {
          obj.repIdWorkOrderAboutMe = this.user_info.repId
        }
        //我创建的工单
        if (tab == 'establish') {
          obj.repIdWorkOrderCreateByMe = this.user_info.repId
        }
        let all_work_order = {
          url: '/work_order/all_work_order',
          method: 'POST',
        }
        baseAjax(all_work_order, obj, (res) => {
          if (res.code == statusCode.success) {
            this.tableData = res.data.workOrderInfoListResponseList
            this.page.totalPage = res.data.totalPage
            this.page.total = res.data.count
          }
        })
      },
      //当前页
      handleCurrentChange(currentPage) {
        this.page.currentPage = currentPage;
        this.requestData(this.activeName)
      },
      //改变每页条数
      handlePageSize(pageSize){
        this.page.pageSize = pageSize;
        this.requestData(this.activeName);
      },
      //获取所有项目
      allProjects() {
        let getAllProductInfo = {
          url: '/product/getAllProductInfo',
          method: 'POST',
        }
        baseAjax(getAllProductInfo, '', (res) => {
          if (res.code == statusCode.success) {
            this.projectList = res.data
          }
        })
      },
      //项目返回值
      project(value) {
        this.returnProject = value
      },
      //所有创建人、当前处理人
      allFounderHandler() {
        let electAllRepList = {
          url: '/representative/selectAllRepList',
          method: 'GET',
        }
        baseAjax(electAllRepList, '', (res) => {
          if (res.code == statusCode.success) {
            this.founderList = res.data
            this.handlerList = res.data
          }
        })
      },
      //创建人返回值
      founder(value) {
        this.returnFounder = value
      },
      //当前处理人返回值
      handler(value) {
        this.returnHandler = value
      },
      //工单状态返回值
      workOrderStatus(value) {
        this.returnWorkOrderStatus = value
      },
      //获取所有工单类型
      work_order_type() {
        let work_order_type = {
          url: '/resource/getReourceItem/work_order_type',
          method: 'GET',
        }
        baseAjax(work_order_type, '', (res) => {
          if (res.code == statusCode.success) {
            this.workOrderTypeList = res.data
          }
        })
      },
      //工单类型返回值
      workOrderType(value) {
        this.returnWorkOrderType = value
      },
      //创建时间返回值
      creationTime(value) {
        this.returnCreationTime = value
      },
      //重置方法调用
      reset() {
        this.$refs.resetFun.resetFun();
        setTimeout(() => {
          this.requestData(this.activeName)
        }, 10)
      },
      //医生信息
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          let obj = {
            doctorName: query,
            currentPage: 0,
            pageSize: 200,
            totalPage: 0,
          }
          let searchDoctorInfo = {
            url: '/doctors/searchDoctorInfo',
            method: 'POST',
          }
          baseAjax(searchDoctorInfo, obj, (res) => {
            if (res.code == statusCode.success) {
              let list = []
              res.data.value.forEach((val) => {
                list.push({
                  id: val.doctorId,
                  name: val.doctorName + '、' + val.hospitalName + '、' + val.depart,
                  doctorContact: val.doctorContact,
                })
              })
              setTimeout(() => {
                this.loading = false;
                this.doctorInformationList = list.filter(item => {
                  return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
                });
              }, 200);
            }
          })
        } else {
          this.doctorInformationList = [];
        }
      },
      //图片上传
      OnChange(file, fileList) {
        const isType = file.type === 'image/jpeg' || 'image/jpg' || 'image/png'
        const isLt5 = file.size / 1024 < 512
        if (!isType) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
          fileList.pop()
        }
        if (!isLt5) {
          this.$message.error('上传头像图片大小不能超过 512k!');
          fileList.pop()
        } else {
          this.dataForm.imgFileList.push(file)
        }
        this.hideUpload = fileList.length >= 3
        // return isType && isLt5;
      },
      //创建工单提交
      submit() {
        if (!this.workOrderProject) {
          this.$message.error('请选择项目!');
          return;
        }
        if (!this.doctorInformation) {
          this.$message.error('请选择医生信息!');
          return;
        }
        if (!this.establishWorkOrderType) {
          this.$message.error('请选择工单类型!');
          return;
        }
        if (!this.WorkOrderTitle) {
          this.$message.error('请选择工单标题!');
          return;
        }
        if (!this.WorkOrderDescribe) {
          this.$message.error('请选择工单描述!');
          return;
        }
        if (!this.WorkOrderHandler) {
          this.$message.error('请选择处理人!');
          return;
        }
        let visitRecord = ''
        this.visitRecordLists.forEach((val) => {
          if (this.visitRecord.split('、')[0] == val.callRecordId) {
            visitRecord = val
          }
        })
        let obj = {
          id: '',
          doctorContact:this.doctorInformation.doctorContact.toString(),
          createRepId: this.user_info.repId,
          createRepName: this.user_info.name,
          productId: this.workOrderProject.id,
          productName: this.workOrderProject.name,
          doctorId: this.doctorInformation.id,
          doctorName: this.doctorInformation.name.split('、')[0],
          sinToken: visitRecord.sinToken,
          callRecordId: visitRecord.callRecordId,
          callTime: visitRecord.operationTime,
          callResultId: visitRecord.callResultId,
          callResult: visitRecord.item,
          deadlineTime: this.deadline,
          workOrderSource: '',
          workOrderTypeId: this.establishWorkOrderType.resourceValue,
          workOrderType: this.establishWorkOrderType.resourceItem,
          workOrderTitle: this.WorkOrderTitle,
          workOrderDesc: this.WorkOrderDescribe,
          workOrderStatus: 0,
          imgUrls: '',
          dealRepId: this.WorkOrderHandler.id,
          dealRepName: this.WorkOrderHandler.name,
          sysStatus: '',
        }
        let formData = new FormData();
        if (this.dataForm.imgFileList.length == 1) {
          this.dataForm.imgFileList.forEach(file => {
            formData.append('img1', file.raw)
          })
        }
        if (this.dataForm.imgFileList.length == 2) {
          formData.append('img1', this.dataForm.imgFileList[0].raw)
          formData.append('img2', this.dataForm.imgFileList[1].raw)
        }
        if (this.dataForm.imgFileList.length == 3) {
          formData.append('img1', this.dataForm.imgFileList[0].raw)
          formData.append('img2', this.dataForm.imgFileList[1].raw)
          formData.append('img3', this.dataForm.imgFileList[2].raw)
        }
        this.dialogTableVisible = false
        this.$message.success('提交成功!');
        this.dataForm.imgFileList = []
        httpForm('/work_order/create_work_order', JSON.stringify(obj), formData, (res) => {
          console.log(res)
        })
        setTimeout(() => {
          this.requestData(this.activeName)
        }, 100)
      },
      //工单详情
      workOrderDetails(value) {
        this.$router.push('/workOrderDetails?workOrderId=' + value.workOrderId)
      },
      submitUpload(obj) {

      },
      //关闭创建工单弹框
      closeCreateDialog(done){
        this.activeWorkOrderName = 'visitInfo';
        done();
      },
      //取消创建工单弹框
      cancelCreateDialog(){
        this.dialogTableVisible = false;
        this.activeWorkOrderName = 'visitInfo';
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/.el-input.el-input--suffix.is-focus>.el-input__inner{
    border-color:#2A82E2;
  }
  /deep/.el-range-editor.is-active{
    border-color:#2A82E2 !important;
  }
  /deep/.el-textarea__inner:focus{
    border-color:#2A82E2 !important;
  }
  /deep/ .el-tabs__item {
    font-size: 18px;
  }

  .el-dialog .blockMould {
    background-color: #F2F2F2;
  }

  //行为按钮
  .behavior {
    margin-bottom: 17px;
    overflow: hidden;

    .el-button {
      height: 32px;
      border-radius: 2px;
      padding:0 18px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      display:inline-flex;
      justify-content:center;
      align-items:center;
    }

    .left {
      float: left;
      .el-button{
        border: 1px solid rgba(42, 130, 226, 1);
        background-color:#FFFFFF;
        color: rgba(42, 130, 226, 1);
      }
      .el-button:hover{
        background-color: rgba(42, 130, 226, 0.12);
      }
    }

    .right {
      float: right;
      button:first-child{
        background-color: rgba(42, 130, 226, 1);
        border-color:transparent;
      }
      button:first-child:hover{
        background-color: rgba(42, 130, 226, 0.7);
      }
      button:first-child:active{
        background-color: #1F6DC3;
      }
      button:last-child{
        border: 1px solid #DDDFE6;
        color: rgba(0, 0, 0, 0.7);
        margin-left:8px;
      }
      button:last-child:hover{
        color: #2A82E2;
      }
    }
  }

  .inline_block {
    width:310px;
    display: inline-block;

    .upload_promit {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #C0C4CC;
      margin:0 0 11px 0;
      display:flex;
      img{
        width:12px;
        height:12px;
        margin-right:4px;
      }
      p{
        margin:0;
      }
    }
  }

  .operationButton {
    text-align: center;
    margin-top:28px;

    .el-button {
      height: 32px;
      border-radius: 2px;
      border: 1px solid #AAAAAA;
      padding:0 36px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
    }
    button:first-child{
      background-color: #FFFFFF;
      color: #767676;
    }
    button:first-child:hover{
      color: #2A82E2;
    }
    button:last-child{
      color: #FFFFFF;
      background-color: #2A82E2;
      border-color:transparent;
    }
    button:last-child:hover{
      background-color: rgba(42, 130, 226, 0.7);
    }
    button:last-child:active{
      background-color: #1F6DC3;
    }
  }

  .blockMould{
    border-radius:2px;
  }

  .mandatory_logo{ 
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #F65C44;
    display: inline-block;
    transform: translateY(3px);
    margin-right:2px;
  }

  .work_search{
    padding:0;
    margin-bottom:16px;
    /deep/.el-tabs{
      .el-tabs__header{
        margin:0;
        .el-tabs__nav-wrap{
          .el-tabs__nav-scroll{
            .el-tabs__nav{
              padding-left:24px;
              .el-tabs__active-bar{
                height: 3px;
                background: rgba(42, 130, 226, 1);
                border-radius: 4px;
                margin-left:24px;
              }
              .el-tabs__item{     
                font-size: 16px;
                color: #000000;
                line-height:47px;
                height:47px;
              }
              .el-tabs__item.is-active{
                color:rgba(42, 130, 226, 1);
              }
            }
          }
        }
        .el-tabs__nav-wrap::after{
          height: 1px;
          background-color: #EEF0F3;
          border-radius: 4px;
        }
      }
    }
    /deep/.search_lists{
      display:flex;
      padding:24px 16px 10px 44px;
      .search_list{
        margin:0 0 14px 0;
      }
    }
  }

  .work_list{
    /deep/.el-table{
      thead{
        tr{
          th:first-child{
            padding-left:0;
          }
        }
      }
      tbody{
        tr{
          td:first-child{
            padding-left:0;
          }
          td:nth-child(6){
            .cell{
              div{
                span{
                  display:inline-block;
                  height: 20px;
                  line-height:20px;
                  padding:0 9px;
                }
              }
            }
          }
        }
      }
    }
  }

  /deep/.el-dialog__wrapper{
    .el-dialog{
      padding:18px 25px 32px 32px;
      .el-dialog__header{
        padding:0;
        display:flex;
        align-items:center;
        .el-dialog__title{
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #202020;
        }
        .el-dialog__headerbtn{
          right:22px;
          .el-dialog__close{
            color:#666666;
          }
        }
      }
      .el-dialog__body{
        padding:0;
        .el-tabs{
          .el-tabs__header{
            margin-bottom:20px;
            .el-tabs__nav-wrap{
              .el-tabs__nav-scroll{
                margin-top: 13px;
                .el-tabs__nav{
                  .el-tabs__item{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    height:34px;
                    line-height:35px;
                  }
                  .el-tabs__item.is-active{
                    color: #2A82E2;
                  }
                  .el-tabs__active-bar{
                    height: 3px;
                    background-color: #2A82E2;
                    border-radius: 4px;
                  }
                }
              }
            }
            .el-tabs__nav-wrap::after{
              height: 1px;
              background-color: #EEF0F3;
              border-radius: 4px;
            }
          }
          .el-tabs__content{
            .el-tab-pane{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.9);
              .el-input.el-input--suffix.is-focus>.el-input__inner{
                border-color:#2A82E2;
              }
              .el-input__inner:focus{
                border-color:#2A82E2 !important;
              }
              .el-range-editor.is-active{
                border-color:#2A82E2 !important;
              }
              .el-select{
                .el-input{
                  .el-input__inner{
                    width: 310px;
                    height: 32px;
                    border-radius: 2px;
                    border: 1px solid #DDDFE6;
                  }
                }
              }
              .el-input{
                width: 310px;
                height: 32px;
                .el-input__inner{
                  border-radius: 2px;
                  border: 1px solid #DDDFE6;
                }
              }
              .el-textarea{
                width: 310px;
                .el-textarea__inner{
                  height: 100px;
                  border-radius: 2px;
                  border: 1px solid #DDDFE6;
                  resize:none;
                }
              }
              .search_list{
                margin-bottom:12px;
              }
            }
            .visit_info{
              .visit,.time{
                padding-left: 8px;
              }
            }
            .work_info{
              .work_desc{
                display:flex;
                .mandatory_logo,.search_text{
                  margin-top:9px;
                }
              }
              .work_image{
                display:flex;
                margin-bottom:0;
                padding-left:8px;
                .search_text{
                  width:70px;
                }
                .el-form{
                  .el-form-item{
                    margin-bottom:0;
                    .el-form-item__content{
                      line-height:0;
                      .el-upload--picture-card{
                        width: 120px;
                        height: 120px;
                        background-color: #FFFFFF;
                        border-radius: 2px;
                        border: 1px dashed #DDDFE6;
                        margin-bottom:12px;
                        i{
                          transform: translateY(-8px);
                        }
                      }
                      .el-upload-list--picture-card{
                        li{
                          width: 120px;
                          height: 120px;
                        }
                      }
                    }
                  }
                }
              }
              .work_user{
                .search_text{
                  display:inline-block;
                  width:69px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
